<!--
  - MIT License
  - Copyright <2021-2022>
  -
  - Permission is hereby granted, free of charge, to any person obtaining a copy
  - of this software and associated documentation files (the "Software"), to deal
  - in the Software without restriction, including without limitation the rights
  - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
  - of the Software, and to permit persons to whom the Software is furnished to do so,
  - subject to the following conditions:
  -
  - The above copyright notice and this permission notice shall be included in all
  - copies or substantial portions of the Software.
  -
  - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
  - INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
  - PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
  - HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
  - CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
  - OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  - @Author: Sinda
  - @Email:  xhuicloud@163.com
  -->

<template>
  <div class='echarts-box'>
    <div ref='xhuiChart' style='height: 100%; width: 100%'>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, getCurrentInstance, defineProps, ref, markRaw } from 'vue'

const echarts = getCurrentInstance().appContext.config.globalProperties.$echarts

const xhuiChart = ref(null)

const charts = ref({})

const props = defineProps({
  option: {
    type: Array,
    default: null
  }
})

onMounted(() => {
  charts.value = markRaw(echarts.init(xhuiChart.value))
  charts.value.setOption(props.option)
  // 自适应
  window.addEventListener('resize', () => {
    charts.value.resize()
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', () => {
    charts.value.resize()
  })
})
</script>

<style lang='scss' scoped>
.echarts-box {
  position: relative;
  width: 100%;
  height: 260px;
  margin: 0 auto;
}
</style>
